<!-- 文件编码为 UTF-8
  组件说明写于此处!
-->
<template>
  <!--
禁止在template中书写样式
禁止在一行内书写两个元素标签
禁止v-for与v-if在同一个元素中使用
严格使用简写绑定:class="",@click=""模式,且顺序为无绑定属性,:绑定属性,@绑定事件
缩进为4个字符,最外层(<template>下一层元素)不缩进
跨行元素若紧接结束标志,则将末尾尖括号>与结束标志放置同一行,如:></div>
组件引用及属性传递,事件监听使用kebab-case模式(受html不区分大小写影响)
-->
  <div v-if="hackReset" class="template-frame">
    <item-group ref="content" :data="myComputed" :value="myComputed" @myEvent="initData" @refresh="refresh" />
  </div>
</template>
<script>
// js要求,在循环体中临时变量的使用顺序:(item,index)->(i,iIndex)->(j,jIndex),禁止超过三层循环嵌套
// data.filter((item,index) => item.map((i,iIndex) => i.filter((j,jIndex) => j.condition)));
// vue严格遵循数据由上向下,事件(刷新除外)由下向上冒泡方式传递
// vue对象各节点顺序按如下模板,所有命名方式使用camelCase命名
import { mapState, mapActions } from 'vuex'
export default {
  // 命名与文件同名
  name: 'VoidStandard',
  // 引用组件使用动态import方式,命名与文件同名
  components: {
    ItemGroup: () => import('@components/ItemGroup.vue')
  },
  directives: {
  },
  // 必需设置type,default,必要时使用require,validator
  // 前缀优先顺序:data,value其它与数据意义关联的英语单词(如布尔值,日期)
  props: {
    // 数值,字符优先使用value命名
    value: {
      type: String,
      require: false,
      default: () => null,
      validator: () => null
    },
    // json对象,数组优先使用data命名
    data: {
      type: Object,
      default: () => null
    },
    // 函数优先使用data命名
    function: {
      type: Function,
      default: () => null
    }
  },
  data() {
    return {
      // 将同种类型或关联作用数据紧密放置
      myData: null,
      hackReset: false
    }
  },
  computed: {
    // store中数据放置最前
    ...mapState({
    }),
    // 计算属性仅做简单计算,多个逻辑必需拆分
    myComputed() {
      return 0
    }
  },
  watch: {
  },
  // mounted只提供接口调用,具体逻辑定义在methods中
  mounted() {
    this.$on('refresh', () => this.initData())
  },
  created() {
    this.initData()
  },
  // created只提供接口调用,具体逻辑定义在methods中
  methods: {
    // store中方法放置最前
    ...mapActions([
    ]),
    // 仅读props,computed数据,读写data数据,调用methods方法
    // 不操作dom任何元素,对全局对象仅使用$emit()方法
    initData() {
      this.$emit()
    },
    refresh(event) {
      this.hackReset = false
      this.$nextTick(() => {
        this.hackReset = true
      })
      this.$refs.content.$emit('refresh', event)
    }
  }

}
</script>
<!--
  css 样式如果为组件自身样式,必需添加scoped限制作用域
  css 样式仅允许使用class选择器
  css 样式使用flex布局方式,rem为单位
  css 属性顺序参考bootstrap编程规范,依次位置Positioning,盒模型BoxModel,内部属性Typographic,显示Visual
-->
<style scoped>
</style>
